<template>
  <el-main class="order-config">
    <div class="box sa-flex sa-col-bottom">
      <div class="title">订单配置</div>
      <div class="line"></div>
    </div>
    <el-form ref="formRef" :model="form.model" :rules="form.rules" label-width="122px">
      <el-form-item label="自动关闭时间" prop="auto_close">
        <div>
          <el-input v-model="form.model.auto_close" placeholder="请输入自动关闭时间" type="number">
            <template #append>分钟</template>
          </el-input>
          <div class="warning-title sa-m-t-4">
            <div>
              订单创建后,用户如在设定时间内未支付,将自动关闭,建议设置为10~15分钟,0为不限制
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="自动收货时间" prop="auto_confirm">
        <div>
          <el-input v-model="form.model.auto_confirm" placeholder="请输入自动收货时间" type="number">
            <template #append>天</template>
          </el-input>
          <div class="warning-title sa-m-t-4">
            <div>
              商品发货后,用户需自行点击确认收货,如在设定时间内无操作,系统将默认收货,0为关闭自动收货
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="自动评价时间" prop="auto_comment">
        <div>
          <el-input v-model="form.model.auto_comment" placeholder="请输入自动评价时间" type="number">
            <template #append>天</template>
          </el-input>
          <div class="warning-title sa-m-t-4">
            <div>
              商品确认收货后,用户需发布商品评价,如在设定时间内无操作,系统将默认5星好评,0为关闭自动评价
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="评价内容" prop="auto_comment_content">
        <el-input v-model="form.model.auto_comment_content" placeholder="请输入自动评价内容">
        </el-input>
      </el-form-item>
      <el-form-item label="评价内容审核">
        <div>
          <el-radio-group v-model="form.model.comment_check">
            <el-radio :label="1">审核后展示</el-radio>
            <el-radio :label="0">直接展示 </el-radio>
          </el-radio-group>
          <div class="warning-title sa-m-t-4">
            <div> 建议用户评价内容在后台审核后展示,选择直接展示将跳过审核直接发布 </div>
          </div>
        </div>
      </el-form-item>

      <el-form-item label="自动退款审核">
        <div>
          <div class="sa-flex sa-m-r-32">
            <el-switch v-model="form.model.auto_refund" class="sa-m-r-8" :active-value="1" :inactive-value="0" />
            <div v-if="form.model.auto_refund == 1" class="openswitch"> 开启 </div>
            <div v-if="form.model.auto_refund == 0">关闭</div>
          </div>
          <div class="warning-title sa-m-t-4">
            <div> 未发货订单,用户申请退款后将自动原路退款,并且恢复库存和销量 </div>
          </div>
        </div>
      </el-form-item>

      <el-form-item label="订单随机优惠">
        <div>
          <el-radio-group v-model="form.model.discount">
            <el-radio :label="1">开启</el-radio>
            <el-radio :label="0">关闭 </el-radio>
          </el-radio-group>
          <div class="warning-title sa-m-t-4">
            <div> 开启后，订单支付会随机减免配置金额 </div>
          </div>
        </div>
      </el-form-item>

      <el-form-item label="金额" prop="discount_rule">
        <div>
          <el-input v-model="form.model.discount_rule" placeholder="请输入减免金额">
            <template #append>元</template>
          </el-input>
        </div>
        <div class="warning-title sa-m-t-4 re-color">
            <div> 请按照如下格式填写,例如0.01-0.80,单位是人民币元 </div>
          </div>
      </el-form-item>

      <div class="box sa-flex sa-col-bottom">
        <div class="title">发票配置</div>
        <div class="line"></div>
      </div>
      <el-form-item label="自助申请发票">
        <div class="sa-flex sa-m-r-32" v-if="form.model.invoice">
          <el-switch v-model="form.model.invoice.status" class="sa-m-r-8" :active-value="1" :inactive-value="0" />
          <div v-if="form.model.invoice.status == 1" class="openswitch"> 开启 </div>
          <div v-if="form.model.invoice.status == 0">关闭</div>
        </div>
      </el-form-item>
      <el-form-item label="票面金额" v-if="form.model.invoice">
        <el-radio-group v-model="form.model.invoice.amount_type">
          <el-radio label="pay_fee">实际支付金额</el-radio>
          <el-radio label="goods_amount">商品金额</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </el-main>
  <el-footer class="sa-footer--submit">
    <el-button @click="getConfig">重置</el-button>
    <el-button type="primary" @click="onSave">保存</el-button>
  </el-footer>
</template>
<script setup>
import { reactive, ref, onMounted, unref } from 'vue';
import { api } from '../config.service';
const formRef = ref();
const form = reactive({
  model: {
    auto_close: '',
    auto_confirm: '',
    auto_comment: '',
    auto_comment_content: '',
    comment_check: 0,
    auto_refund: 0,
    discount:0,
    discount_rule:'',
    invoice: {
      amount_type: '',
      status: 0,
    },
  },
});
async function getConfig() {
  const { data } = await api.order();
  form.model = data;
}
function onSave() {
  unref(formRef) &&
    unref(formRef).validate(async (valid) => {
      if (valid) {
        await api.order(form.model);
      }
    });
}
onMounted(() => {
  getConfig();
});
</script>
<style lang="scss" scoped>
.box {
  font-weight: 500;
  font-size: 14px;
  line-height: 14px;
  color: var(--sa-title);
  position: relative;
  margin: 8px 0 24px 0;
  height: 32px;
}

.line {
  position: absolute;
  left: -1px;
  bottom: 0;
  width: 60px;
  height: 6px;
  background: rgba(128, 106, 246, 0.3);
}

.warning-title {
  font-size: 12px;
  line-height: 16px;
  color: var(--sa-subfont);
}

.openswitch {
  color: var(--el-color-primary);
}
.re-color{
  font-size: 14px;
  color:red;
  margin-right: 10px;
}

</style>
